<template>
	<z-paging ref="paging" v-model="list" @query="queryList" class="container">
		<view v-for="(item,index) in list" :key="item.id" class="content flex-row">
			<text class="row">{{index+1}}</text>
			<text class="title">{{item.title}}</text>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const paging = ref(null)

	const list = ref([{
			'id': '1',
			'title': '2022年一级建造师建筑工程建筑工程管理与实务试题'
		},
		{
			'id': '2',
			'title': '2022年一级建造师机电工程建设工程经济试题'
		}
	])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		paging.value.complete(list.value);
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.container {
		background-color: white;

		.content {
			margin: 28rpx 30rpx 0;
			padding: 26rpx 20rpx;
			background-color: $me-color-background;
			border-radius: 8rpx;

			.row {
				font-size: 28rpx;
				color: $me-color-gray-6;
			}

			.title {
				font-size: 28rpx;
				color: $me-color-gray-1;
				margin-left: 20rpx;
			}
		}
	}
</style>